<template>
    <el-select
        v-model="selectedOptions"
        multiple
        placeholder="请选择"
        :popper-appento-body="false"
        :style="selectWidth"
        @remove-tag="removeTag"
    >
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      >
        <el-checkbox v-model="item.check" @change="isChecked(item)">
          {{ item.label }}
        </el-checkbox>
      </el-option>
      <div class="is-all">
        <div @click="selectAll(true)">全选</div>
        <div @click="selectAll(false)">取消全选</div>
      </div>
    </el-select>
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue'
//定义下拉数据类型
type SelectItem = {
  value: string |number
  label: string
  check: boolean
}
//接收父组件的参数
let props = defineProps({
  options:{
    type:Array<SelectItem>,
    required:true,
  },
  width:{
    type:Number,
    default(){
      return 220;
    }
  },
  bindValue: {
    type: Array<string | number>,
    default() {
      return [];
    }
  }
})
//选择器的宽度
let selectWidth='width:'+props.width+'px'
//注册事件
const emit = defineEmits(["selected"])
//下拉的数据
let selectedOptions = ref<Array<string | number>>([])
//下拉的点击事件
const isChecked = (item: SelectItem) => {
  if (item.check && selectedOptions.value.indexOf(item.value) == -1) {
    selectedOptions.value.push(item.value)
  } else if(!item.check){
    selectedOptions.value.forEach((elm, idx) => {
     if(elm == item.value){
       selectedOptions.value.splice(idx, 1)
     }
    })
  }
  emit("selected", selectedOptions.value)
}
//删除图标
const removeTag = (value:any) => {
  props.options.forEach((elm) => {
    if(elm.value ==value){
      elm.check = false
    }
  })
  emit("selected",selectedOptions.value)
}
//全选
const selectAll = (isAll:boolean)=>{
  if(isAll){
    selectedOptions.value=[]
    props.options.forEach((item:SelectItem)=>{
      item.check=true
      selectedOptions.value.push(item.value)
    })
  }else{
    let arr :Array<string | number>=[]
    props.options.forEach((item)=> {
      item.check=false
      if (!selectedOptions.value.includes(item.value)){
        arr.push(item.value)
      }
    })
    selectedOptions.value=arr
  }
}
//清空角色数据
const clear = ()=>{
  selectedOptions.value=[]
}
defineExpose({
  clear
})
watch(
    () => props.bindValue,
    () => {
      selectedOptions.value = props.bindValue;
      props.bindValue.forEach(item=>{
        props.options.forEach((elm)=>{
          if(elm.value == item){
            elm.check=true
          }
        })
      })
    },
    { deep: true }
);
</script>

<style lang="scss">
.is-all {
  display: flex;
  padding-left:10px;
  div{
    cursor: pointer;
    margin: 6px 10px;
    transition: 0.2s;
    &:hover{
      color: #409EFF;
    }
  }
}
</style>
